import React, { useRef, useState } from "react";
import { MyNavBar } from "../../../../components";
import { useNavigate } from "react-router";
import style from "./style.module.scss";
import wallet_icon_clock_n from "../../../../assets/images/icon/xxhdpi/wallet_icon_clock_n.png";
import { useBoolean } from "ahooks";
import { getDrawRecordList } from "../../../../api/wallet";
import wallet_icon from "../../../../assets/images/image/xxhdpi/wallet_icon.png";
import { dateFormat } from "../../../../utils/formatTime";
import { withdrawalStatusFormatText } from "../../../../utils/formatType";
import { List } from "react-vant";

// 提现记录类型
interface DrawRecordListState {
  id: number;
  money: number;
  remark: string;
  status: number;
  bankCardNumber: string;
  bankName: string;
  createTime: Date | number;
}

interface PropsType {
  item: DrawRecordListState;
}

// 提现记录组件
const WithdrawalItem: React.FC<PropsType> = ({ item }) => {
  return (
    <div className={style["records-item"]}>
      <div className={style["item-left"]}>
        <div className={style.times}>
          <div>{dateFormat(item.createTime, "MM-dd")}</div>
          <div className={style.year}>
            {dateFormat(item.createTime, "yyyy")}
          </div>
        </div>
        <div className={style["section-divider"]}>
          <i className={style["separator"]}></i>
          <img src={wallet_icon} alt="" />
        </div>
      </div>
      <div className={style["item-right"]}>
        <p className={style["amount"]}>{item.money}元</p>
        <div className={style["item-bot"]}>
          <div className={style.status}>
            {withdrawalStatusFormatText(item.status)}
          </div>
          <div className={style.bankCard}>
            <p>到账银行卡</p>
            <p>
              <span>
                {item.bankName} 尾号 {item.bankCardNumber.slice(-4)}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

const Index: React.FC = () => {
  const navigate = useNavigate();
  const drListParams = useRef({
    page: 1,
    count: 10,
  });

  // const { data: drawRecordList = [] } = useRequest(async () => {
  //   const resp = await getDrawRecordList(drListParams.current);
  //   return resp.result as DrawRecordListState[];
  // });
  const [drawRecordList, setDrawRecordList] = useState<DrawRecordListState[]>([
    {
      id: 1,
      money: 10,
      remark: "111111",
      status: 1,
      bankCardNumber: "12345678987654321",
      bankName: "中国天堂银行",
      createTime: 123456789,
    },
  ]);
  // 是否加载完毕
  const [finish, { setTrue, setFalse }] = useBoolean(false);

  const onloadRecordList = async () => {
    const resp = await getDrawRecordList(drListParams.current);
    // 是否存在更多数据
    if (resp.result.length) {
      // 第1页不做合并
      if (drListParams.current.page === 1) {
        setDrawRecordList(resp.result);
      } else {
        setDrawRecordList([...drawRecordList, ...resp.result]);
      }

      // 请求页码+1
      drListParams.current.page++;
      setFalse();
    } else {
      setTrue();
    }
  };
  return (
    <div>
      <MyNavBar
        title="提现记录"
        onClickLeft={() => navigate(-1)}
        style={{ background: "#fff" }}
      ></MyNavBar>
      <div className={style["main-count"]}>
        <List onLoad={onloadRecordList} finished={finish}>
          <div className={style["records-list"]}>
            {drawRecordList.length ? (
              <>
                <img
                  className={style["wallet_icon_clock_n"]}
                  src={wallet_icon_clock_n}
                  alt=""
                />
                <>
                  {drawRecordList.map((item) => {
                    return <WithdrawalItem item={item} key={item.id} />;
                  })}
                </>
              </>
            ) : (
              <>暂无记录</>
            )}
          </div>
        </List>
      </div>
    </div>
  );
};

export default Index;
